<style lang="scss">
	page {
		background: linear-gradient(to bottom, rgba(252, 65, 67, .2), #fff);
	}

	.card {
		position: relative;
		background: #fff;
		width: 690rpx;
		min-height: 300rpx;
		margin: 0rpx auto;
		border-radius: 30rpx;
		border: 1rpx solid #ccc;
		overflow: hidden;

		.hd {
			width: 690rpx;

			.card-item {
				width: 690rpx;
				height: 150rpx;
				display: flex;
				justify-content: start;

				.card-left {
					image {
						display: block;
						width: 120rpx;
						height: 120rpx;
						margin: 20rpx;
					}
				}

				.card-right {
					margin-top: 20rpx;

					.title {
						font-weight: 600;
					}

					.prices {
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #919191;
					}

					.count {
						margin-left: 450rpx;
						display: flex;
						margin-top: -20rpx;
					}
				}
			}
		}

		.box {
			margin-top: 200rpx;
		}

		.bd {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			width: 690rpx;
			height: 100rpx;
			border-top: 1px solid #ccc;
			display: flex;
			align-items: center;

			.countall {
				margin-left: 370rpx;
				color: #919191;

				text {
					padding: 0rpx 5rpx;
					color: #000;
				}
			}

			.priceall {
				color: #919191;

				text {
					padding: 0rpx 5rpx;
					color: #000;
				}
			}
		}
	}

	.fixedbox {
		position: fixed;
		background: #fff;
		bottom: 0rpx;
		left: 0rpx;
		width: 750rpx;
		height: 150rpx;
		border-top: 1rpx solid #ccc;
		display: flex;
		justify-content: start;
		align-items: center;

		.fix-left {
			width: 375rpx;
			height: 150rpx;
			padding-left: 30rpx;
			line-height: 150rpx;
			font-size: 30rpx;

			.fixtext {
				font-weight: 600;
			}
		}

		.fix-right {
			margin-left: 100rpx;
		}

	}
</style>

<template>
	<uni-card title="自提" extra="2024/11/20" class="unicardtop">
		<text class="uni-body">直线距离313M | 广东省广州市北京路欧盟...</text>
	</uni-card>
	<view class="card">
		<view class="hd">
			<view class="card-item" v-for="item in datalist.goods">
				<view class="card-left">
					<image :src="item.imgs" mode=""></image>
				</view>
				<view class="card-right">
					<view>
						<view class="title">{{item.moreName}}</view>
					</view>
					<view class="prices list">{{item.list}}</view>
					<view class="prices ">x {{item.counts}}</view>
					<view class="count">
						<view>￥</view>
						<view>{{item.counts * item.price}}</view>
					</view>
				</view>
			</view>
			<div class="box"></div>
		</view>
		<view class="bd">
			<view class="countall">共<text>{{rescount}}</text>件,</view>
			<view class="priceall">合计￥<text>{{resprice}}</text></view>
		</view>
	</view>

	<uni-card>
		<view class="uni-body">不要打包袋
			<radio style="margin-left: 400rpx;" color="red"></radio>
		</view>
	</uni-card>
	<uni-card>
		<view class="uni-body" style="display: flex;">
			备注 <i class="iconfont icon-gengduo2"></i>
		</view>
	</uni-card>
	<view class="fixedbox">
		<view class="fix-left">
			<view>实付 ￥<text class="fixtext">{{resprice}}</text></view>
		</view>
		<view class="fix-right">
			<button type="warn" @click="queren">确认支付</button>
		</view>
	</view>
</template>

<script setup>
	import {
		getbuyone,
	} from '../../api/publish.js';
import { postmenu } from '../../api/menu.js';
	import {
		computed,
		ref
	} from 'vue'
	const datalist = ref({})
	let datas = []
	let rescount = ref(0)
	let resprice = ref(0)
	const render = async () => {
		const res = await getbuyone()
		// console.log(res)
		datalist.value = res.data

		console.log(datalist.value.goods, '数据')
		rescount.value = datalist.value.goods.reduce((prev, item) => prev += item.counts, 0)
		resprice.value = datalist.value.goods.reduce((prev, item) => prev += item.counts * item.price, 0)
	}
	render()


	const queren = async() => {
		// console.log(datalist.value.goods)
		// let obj = datalist.value.goods
	
		let	prices =  datalist.value.goods.price
		let moreName = datalist.value.goods.moreName
		let	imgs = datalist.value.goods.imgs
		let	counts = datalist.value.goods.counts
		let	list = datalist.value.goods.list
		
		let datas = {
			prices,
			moreName,
			imgs,
			counts,
			list
		}
		uni.switchTab({
			url: '/pages/menu/menu'
		})
	}
</script>